<template>
    <div class="play-box">
        <div v-show="!isMusicPlay" class="player-hidden-line" @mouseover="isMusicPlay = true">
        </div>
        <div v-show="isMusicPlay" @mouseleave="isMusicPlay = false">
            <div id="aplayer" />
        </div>
    </div>
</template>

<script>

import aplayer from 'aplayer';
import {onMounted, ref, watchEffect} from "vue";
import {useStore} from "vuex";

export default {
    name: "HomeMusicPlayer",
    setup() {
        const store = useStore();
        let isMusicPlay = ref(false);
        onMounted(() => {
            const ap = new aplayer({
                container: document.getElementById('aplayer'),
                listFolded: false,
                // fixed: true,
                listMaxHeight: 90,
                lrcType: 1,
                audio: store.state.audio
            });
            
            watchEffect(() => {
                let audioTmp1 = store.state.audio;
                // 等待时间,不然监听器获取的数据时间太快了，vuex提交后任然获取到错误的数值
                let loadTime = 0;
                if (audioTmp1.length <= 1) {
                    // 单曲播放
                    loadTime = 600;
                }
                else if (audioTmp1.length <= 10) {
                    // 歌单或者专辑播放
                    loadTime = 1200;
                } else if (audioTmp1.length <= 20) {
                    loadTime = 2000;
                } else if (audioTmp1.length <= 30) {
                    loadTime = 2500;
                } else if (audioTmp1.length <= 40){
                    loadTime = 3000;
                } else {
                    loadTime = 3500;
                }
                setTimeout(() => {
                    let audioTmp = store.state.audio;
                    ap.list.clear();
                    ap.list.add(audioTmp);
                    if (audioTmp[0].name == "Audio name") {
                        isMusicPlay.value = false;
                    } else {
                        isMusicPlay.value = true;
                    }
                    ap.list.hide();
                    ap.play();
                }, loadTime)
            })
        })
        // onMounted(() => {
        //
        //
        //     let audioList = [];
        //     let audioItem = {};
        //     let index = 0;
        //     watchEffect(() => {
        //         // eslint-disable-next-line no-unused-vars
        //         let audioTmp1 = store.state.audio;
        //         // vuex同步修改有延迟，暂时只能想到这个方法解决，如果点击出现错误可以设置更长的等待时间
        //         // 不知道把MostPopularRecommendedItem.vue中的更新歌曲方法换成异步的能不能解决
        //         setTimeout(() => {
        //             let audioTmp = store.state.audio;
        //             if (typeof(audioTmp[0].name) == "undefined") {
        //                 console.log('空');
        //                 return null;
        //             }
        //             for (let i = 0; i < audioTmp.length; i++) {
        //                 audioItem.name = audioTmp[i].name;
        //                 audioItem.cover = audioTmp[i].cover;
        //                 audioItem.theme = audioTmp[i].theme;
        //                 audioItem.arts = audioTmp[i].arts;
        //                 audioItem.url = audioTmp[i].url;
        //                 audioList[index] = audioItem;
        //                 index++;
        //             }
        //             index = 0;
        //             // eslint-disable-next-line no-unused-vars
        //             const ap = new aplayer({
        //                 container: document.getElementById('aplayer'),
        //                 listFolded: false,
        //                 fixed: true,
        //                 listMaxHeight: 90,
        //                 lrcType: 3,
        //                 audio: audioTmp
        //             });
        //             if (audioTmp.length >= 1) {
        //                 isMusicPlay.value = true;
        //             } else {
        //                 isMusicPlay.value = false;
        //             }
        //         }, 500)
        //
        //     })
        // })
        return {
            isMusicPlay
        }
    }
}
</script>

<style scoped lang="scss">
@import '@/assets/css/base.scss';
.play-box {
    @apply sticky;
    //高度与aplayer限制相同
    width: $client-width;
    bottom: 0;
    z-index: 1000;
    .player-hidden-line {
        @apply shadow-xl;
        height: 1px;
    }
}
</style>